<script setup lang="ts">
import {usePlayerViewStore} from "@/stores"
import HeaderWindowsBtn from "@/components/Screen/HeaderWindowsBtn.vue";

const playerView = usePlayerViewStore()

const handleShowPlayer = ()=>{
  playerView.show = ! playerView.show
}
</script>

<template>
  <div class="play-header">
    <div class="hide-btn iconfont icon-xiangxiajiantou" @click="handleShowPlayer"></div>
    <div class="opt-btn">
      <HeaderWindowsBtn :themeDarkStyle="true"></HeaderWindowsBtn>
    </div>
  </div>
</template>

<style scoped lang="scss">
.play-header{
  height: 40px;
  //background-color: #1ecf9d;
  display: flex;
  justify-content: space-between;
  padding: 20px 24px 10px 24px;
  -webkit-app-region: drag;

  .hide-btn{
    height: 20px;
    width: 20px;
    color: white;
    -webkit-app-region: no-drag;
    &:hover{
      color: #1ecf9d;
    }
    //background-color: black;
  }

  .opt-btn{
    display: flex;
    -webkit-app-region: no-drag;

  }
}
</style>